<template>
	<div class="modal">
		<Modal v-model="data.isShow" width="800" :mask-closable="false" :styles="{top: '60px'}">
			<p slot="header" class="header-view">转厅</p>
			<div class="main-view">
				<div class="left-view">
					<Form ref="formValidate" :model="data.data" :rules="ruleValidate" :label-width="100">
						<FormItem label="影厅：">
							<p>{{data.row.name}}</p>
						</FormItem>
                        <FormItem label="会员卡号：" v-if="costDetailData.isMember">
							<p>{{costDetailData.cardNo}}</p>
						</FormItem>
						<FormItem label="姓名：">
							<p>{{costDetailData.name}}</p>
						</FormItem>
						<FormItem label="手机号：">
							<p>{{costDetailData.phoneNum}}</p>
						</FormItem>
						<FormItem label="实到人数：">
							<p>{{costDetailData.number}}</p>
						</FormItem>
                        <FormItem label="本次结束时间：">
							<p>{{endTime}}</p>
						</FormItem>
						<FormItem label="剩余时长：">
							<p>{{formatHours(costDetailData.minutes)}}</p>
						</FormItem>
						<FormItem label="关联影厅：" props="newName">
							<p v-if="newName != ''">{{newName}}</p>
							<Input v-model="newName" style="display: none"></Input>
							<Button type="primary" @click="clickChoiceMoive">选择影厅</Button>
						</FormItem>
					</Form>
				</div>
				<div class="right-view">
					<div class="statistics">
						<XPriceView :data="orderPriceData"></XPriceView>
					</div>
					<div class="pay-view">
						<XPaywayView
							:data="payWayData" :isMember="isMemberData" :orderPrice="orderPriceData.money">
						</XPaywayView>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="data.isLoading" @click="clickSubmit">完成</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
        <!-- 选择影厅 -->
		<div v-if="choiceMovieData.isShow">
			<XMovieChoiceModal :data="choiceMovieData" @on-submit="clickMSubmit"></XMovieChoiceModal>
		</div>
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import XPaywayView from '@/components/XPaywayView'
import XPriceView from '@/components/XPriceView'
import $ from 'jquery'
import XMovieChoiceModal from '@/components/XMovieChoiceModal' //选择影厅弹窗
import {formatTimestamp} from '@/common/js/date_util.js'

export default {
	components: {
		XPriceView,XPaywayView,XMovieChoiceModal,
    },
	props: ['data'],
	data() {
		return {
			isTransfer: false,
			isMemberData: {
				isMember: false,
				isGiveCredit: '',
				creditLine: '',
				mstatus: null
			},
			ruleValidate: {
				newName: [
					{ required: true, message: '请选择影厅', trigger: 'blur' }
				],
			},
			orderPriceData: {},
			payWayData: {
				payWay: '2',
				isHand: '',
				password: ''
			},
			newName: '',
            choiceMovieData: { //选择影厅
				isShow: false,
				isLoading: false,
				data: {
					newId: null,
				}
			},
			costDetailData: {}
		}
	},
	mounted() {
		let formItem = $('.ivu-form-item');
		for(let i = 0; i < formItem.length; i++) {
			formItem[i].style.marginBottom = '.1rem';
		}
		this.roomCostDetail();
	},
	computed: {
		endTime() {
			return formatTimestamp(this.costDetailData.endTime);
		}
	},
	methods: {
		formatHours(val) {
			let time = ''
			if (val < 60) {
				time = val + '分';
			} else {
				time = Math.floor(val/60) + "小时" + (val%60) + "分"
			}
			return time
		},
        clickChoiceMoive() {
            this.choiceMovieData.isShow = true;
		},
		clickSubmit () {
			let params = {
				id: this.orderPriceData.oid,
				payWay: this.payWayData.payWay,
				isHand: 0
			}
			if (this.payWayData.payWay == 2) {
				params.getMoney = this.orderPriceData.money
			} else if (this.payWayData.payWay == 8) {
				params.isHand = this.payWayData.isHand;
				params.handRoomId = this.data.row.rid
			} else if (this.payWayData.payWay == 1) {
				params.password = this.payWayData.password
			} else {
				params.getMoney = '';
			}
			this.$emit('on-submit', params, this.data);
		},
		clickMSubmit(formData) {
			this.createChangeOrder(formData);
		},
		
		
		createChangeOrder(formData) {
			let params = {
				id: this.data.row.rid,
				newId: formData.data.rid,
			};
			formData.isLoading = true;
			roomService.createChangeOrder(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.newName = formData.data.name;
					this.orderPriceData = result.data;
					formData.isShow = false;
					formData.isLoading = false;
				} else {
					formData.isLoading = false;
					this.$Message.error(resmsg);
				}
			}, error => {
				formData.isLoading = false;
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomCostDetail() {
			roomService.roomCostDetail(this.data.row.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.costDetailData = result.data;
					if (result.data.isMember == 1) {
						this.isMemberData.isMember = true;
					}
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
	}
}	
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	display: flex;
	// height: 8.2rem;
	.left-view {
		color: #433E41;
		border-right: .01rem solid #D5CED2;
		width: 50%;
		height: 100%;
		padding-right: .2rem;
		.td {
			width: 1rem;
			text-align: right;
		}
		.input {
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
		.btn {
			width: 1.8rem;
		}
	}
	.right-view {
		width: 50%;
		padding: 0 .2rem;
		.statistics {
			margin-bottom: .3rem;
		}
	}
}

</style>